<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>4-2-4</title>
    <script src="js/jquery-1.3.1.js"></script>
    <link href="css/style.css" rel="stylesheet" />
        <script type="text/javascript">
        	$(function(){
				//1绑定bind鼠标移入展示移出隐藏bind（mouseover mouseout）
				// $(".head").bind("mouseover",function()
				// {
				// 	$(".content").show();
				// }).bind("mouseout",function()
				// {
				// 	$(".content").hide();
				// });
				//2添加鼠标移入展示移出隐藏mouseover mouseout
				// $(".head").mouseout(function()
				// {
				// 	$(".content").hide();
				// }).mouseover(function()
				// {
				// 	$(".content").show();
				// });
				//3添加鼠标移入展示移出隐藏hover
				// $(".head").hover(function()
				// {
				// 	$(".content").show();
				// },function()
				// {
				// 	$(".content").hide();
				// });
				//4添加点击轮流隐藏和展示toggle
				// $(".head").toggle(function()
				// {
				// 	$(".content").show();
				// },function()
				// {
				// 	$(".content").hide();
				// });
				
				$(".head").click(function(){
					$(".content").toggle(1000);
				});
				
			});
        </script>
       
</head>
<body>
    <div id="panel">
        <h5 class="head">什么是jQuery?</h5>
        <div class="content">
            jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
        </div>
    </div>
</body>
</html>